import React from 'react';
import { Button, Form, Icon, Input, message } from 'antd';
import './index.css';
import { axhttp } from '@/utils/axhttp';
import { router } from 'umi';

const FormItem = Form.Item;
const { loginXhr } = axhttp;
const Index: React.FC<any> = props => {
  const { form } = props;

  const loginSubmit = (e: any) => {
    e && e.preventDefault();

    form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        var formValue = form.getFieldsValue();
        loginXhr('/api/user/read', {
          name: formValue.name,
          passWord: formValue.passWord,
        }).then(res => {
          if (res.list.length > 0) {
            localStorage.setItem('is_login', 'true');
            localStorage.setItem('login_user', JSON.stringify(res.list[0]));
            window.location.href = '/#/buyer/material/goods/data';
          } else {
            message.error('用户名或者密码不正确！');
          }
        });
      }
    });
  };

  const handleRegister = (e: any) => {
    e && e.preventDefault();
    window.location.href = '/#/register';
  };

  return (
    <>
      <div className="headtop"></div>
      <div className="login">
        <h1>Login</h1>
        <Form className="login-form">
          <FormItem>
            {form.getFieldDecorator('name', {
              initialValue: '',
              rules: [
                {
                  required: true,
                  message: '用户名不能为空',
                },
                // {
                //     min: 5, max: 64,
                //     message: '长度不在范围内'
                // },
                // {
                //     pattern: new RegExp('^\\w+$', 'g'),
                //     message: '用户名必须为字母或者数字'
                // }
              ],
            })(<Input prefix={<Icon type="user" />} placeholder="请输入用户名" />)}
          </FormItem>
          <FormItem>
            {form.getFieldDecorator('passWord', {
              initialValue: '',
              rules: [],
            })(<Input.Password prefix={<Icon type="lock" />} placeholder="请输入密码" />)}
          </FormItem>
          <FormItem>
            <Button type="primary" onClick={loginSubmit} className="button">
              登录
            </Button>
            <p style={{ paddingTop: '10px' }}>
              <a
                onClick={handleRegister}
                style={{ textDecoration: 'none', color: 'rgb(29, 27, 27)', marginTop: '10px' }}
              >
                还没有账号去
                <span style={{ color: 'rgb(179, 15, 15)', fontSize: 'large', fontWeight: 600 }}>
                  注册
                </span>
              </a>
            </p>
          </FormItem>
        </Form>
      </div>
    </>
  );
};

export default Form.create<any>()(Index);
